<template>
  <page-container>
    <search-form
      v-model="searchForm"
      :searchColumns="searchColumns"
      :searchOptions="{ menuSpan: 12 }"
      @on-search="handleSearch">
      <template v-slot:newBtn>
        <el-button
          type="primary"
          @click="handleAction('add')"
          >新增关键词</el-button
        >
        <el-button
          type="primary"
          @click="inKeyword"
          >关键词导入</el-button
        >
      </template>
      <template></template>
    </search-form>

    <avue-table
      :dataList="dataList"
      :loading="loading"
      :page="page"
      :tableColumns="tableColumns"
      @onPageChange="onPageChange"
      :tableOptions="{ menuWidth: 100 }">
      <template v-slot:menu="{ row }">
        <el-button
          type="primary"
          @click="handleAction('edit', row)"
          icon="el-icon-edit"
          circle></el-button>
        <el-button
          @click="delRow(row.id)"
          type="danger"
          icon="el-icon-delete"
          circle></el-button>
      </template>
    </avue-table>
    <UploadFile
      ref="uploadKeyRef"
      @refresh="handleSearch"></UploadFile>
  </page-container>
</template>

<script>
import tableMixins from '@/mixins/table'
import { deepClone } from '@/utils'
import { mapGetters } from 'vuex'
import { queryKeyWordForm, addKeyWordForm, editKeyWordForm, delKeyWordForm } from '@/api/sales'
import { searchColumns, tableColumns } from './config/table-config'
import { allDialogForm } from './config/dialogForm'
import UploadFile from './components/uploadFile.vue'
export default {
  components: { UploadFile },
  mixins: [tableMixins],
  data() {
    return {
      action: 'add',
      dataList: [],
      childList: [],
      searchForm: {},
      dialogForm: {
        status: 1,
      },
    }
  },
  computed: {
    ...mapGetters(['commonData', 'countryList']),
    userList() {
      return this.commonData?.userList ?? []
    },
    allDialogForm,
    searchColumns,
    tableColumns,
  },
  methods: {
    fetchMethod: queryKeyWordForm,
    delMethod: delKeyWordForm,
    // 查询参数格式化
    formatSearch() {
      const searchParams = deepClone(this.searchForm)
      return searchParams
    },
    async inKeyword() {
      this.$refs.uploadKeyRef.show = true
    },
    handleAction(type, row) {
      this.action = type
      let formData = {}

      // 处理数据
      formData = deepClone(this.dialogForm)
      if (type === 'edit') {
        formData = deepClone(row)
      }

      this.$dialogForm.show({
        title: `${type === 'edit' ? '编辑' : '新增'}关键词`,
        width: '50%',
        data: formData,
        option: {
          span: 24,
          labelWidth: 120,
          column: this.allDialogForm,
        },
        callback: async ({ data, close }) => {
          let resData = {}
          if (type === 'add') {
            resData = await addKeyWordForm(data)
          } else {
            resData = await editKeyWordForm(data)
          }
          if (resData.code === 0) {
            this.$message.success(`${type === 'add' ? '新增' : '编辑'}成功`)
          }

          close()
          this.getList()
        },
      })
    },
  },
  mounted() {
    this.handleSearch()
  },
}
</script>

<style lang="scss" scoped></style>
